
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAIA Web UI</title>
    <style>
        body { font-family: sans-serif; display: flex; flex-direction: column; height: 100vh; margin: 0; }
        #chat-container { flex: 1; overflow-y: auto; padding: 10px; }
        #input-container { display: flex; padding: 10px; border-top: 1px solid #ccc; }
        #prompt-input { flex: 1; padding: 5px; }
        #send-button { padding: 5px 10px; }
    </style>
</head>
<body>
    <div id="chat-container"></div>
    <div id="input-container">
        <input type="text" id="prompt-input" placeholder="Enter your prompt...">
        <button id="send-button">Send</button>
    </div>
    <script>
        const chatContainer = document.getElementById('chat-container');
        const promptInput = document.getElementById('prompt-input');
        const sendButton = document.getElementById('send-button');

        async function sendMessage(prompt) {
            appendMessage('User', prompt);
            promptInput.value = '';

            const response = await fetch('/api/prompt', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ prompt: prompt })
            });

            const data = await response.json();
            appendMessage('SAIA', data.response);
        }

        sendButton.addEventListener('click', async () => {
            const prompt = promptInput.value;
            if (!prompt) return;
            sendMessage(prompt);
        });

        function appendMessage(sender, message) {
            const messageElement = document.createElement('div');
            messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
            chatContainer.appendChild(messageElement);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        // Check for 'p' parameter in URL on page load
        document.addEventListener('DOMContentLoaded', () => {
            const urlParams = new URLSearchParams(window.location.search);
            const initialPrompt = urlParams.get('p');
            if (initialPrompt) {
                sendMessage(decodeURIComponent(initialPrompt));
            }
        });
    </script>
</body>
</html>
